<template>
	<view>
		<view class="container">
			<view style="width: 100%; height:40rpx;">

			</view>
			<view class="iceFlex">
				<view class="shili">
					<view class="color green">

					</view>
					<view class="text miniFont">
						已答<text class="noVertical">{{yiWeiZuo[1]}}</text>
					</view>
				</view>
				<view class="text textBorder textBorderTop">
					跳至第
				</view>
				<view class="shili">
					<view class="color red">

					</view>
					<view class="text miniFont">
						未答<text class="noVertical">{{yiWeiZuo[0]}}</text>
					</view>
				</view>
			</view>
			<view class="iceFlexWrap">
				<view class="Qs" :class="[submitData.question_detail[k].answer == '' ? 'red' : 'green']"
					v-for="(v,k) in submitData.question_detail" @click="jumpQ(k)">
					{{k+1}}
				</view>
			</view>
			<view class="text textBorder textBorderBottom">
				题
			</view>
			<view class="iceFlex bottom">
				<u-button type="primary" plain text="取消" @click="emits('iceClose')"></u-button>
				<u-button type="primary" text="交卷" @click="submit"></u-button>
			</view>
		</view>
		<iceDialog :msgParams="msgParams2.value" @iceClose="iceClose" />
		<iceMessage :msgParams="msgParams.value" @iceClose="msgParams.isOpen=false" />
	</view>
</template>

<script setup>
	import {
		ref,
		reactive
	} from 'vue'

	import {
		setGetAllData
	} from '@/src/utils/icePinia';
	import {
		iceSetStorage
	} from '../../utils/common';
	import {
		postHandExamPages
	} from '../../src/api/runApi';
	const submitData = setGetAllData().submitData
	const yiWeiZuo = ref([0, 0])
	// 遍历已做多少、未做多少题
	submitData.question_detail.forEach(v => {
		yiWeiZuo.value[v.answer == '' ? 0 : 1]++
	})
	const emits = defineEmits(['iceClose', 'jumpQ'])
	const props = defineProps({
		QLength: {
			type: Number
		},
		questionInfoData: {
			type: Array
		}
	})
	const msgParams = reactive({
		value: {
			msgType: '',
			messageText: '',
			isOpen: false
		}
	})
	const msgParams2 = reactive({
		value: {}
	})
	const iceClose = (e) => {
		if (e == 'confirm') {
			postHandExamPages(msgParams)
		}
	}
	const submit = () => {
		msgParams2.value = {
			title: '确定要交卷吗？',
			isOpen: true
		}
	}
	const jumpQ = (k) => {
		emits('jumpQ', k)
		emits('iceClose')
	}
</script>

<style lang="scss" scoped>
	.container {
		width: 80%;
		margin: 0 auto;

		.text {
			margin: 0 auto;
			padding: 20rpx 0;
			writing-mode: vertical-rl;
			// text-orientation: upright;
			font-family: '楷体';
			font-size: 44rpx;

			.noVertical {
				writing-mode: horizontal-tb;
			}
		}

		.iceFlexWrap {
			height: 50vh;
			border: 1px #999 solid;
			overflow: scroll;
		}

		// .textBorder{
		// 	border: 1px #999 solid;
		// }
		// .textBorderTop{
		// 	border-bottom: none;
		// }
		// .textBorderBottom{
		// 	border-top: none;
		// }
		.Qs {
			width: 46px;
			height: 46px;
			margin-top: 9rpx;
			text-align: center;
			line-height: 46px;
			color: white;
			font-weight: bold;
		}

		.color {
			width: 20px;
			height: 12px;
		}

		.miniFont {
			font-size: 14px;
		}

		.red {
			background-color: #d81e06;
		}

		.green {
			background-color: #00ac00;
		}

		.bottom {
			margin: 12px auto;
		}
	}
</style>